<template>
  <div class="common_page">
    <div ref="mainContent" class="main_content">
      <el-card style="margin-bottom:10px;">
        <el-form ref="queryForm" :inline="true" :model="searchData" label-width="68px" style="margin-bottom:-20px;">
          <el-form-item label="关联订单" prop="buinumberdingId">
            <el-input
                v-model="searchData.number"
                placeholder="请输入内容">
            </el-input>
          </el-form-item>
          <el-form-item label="操作" prop="type">
            <el-select v-model="searchData.type" clearable placeholder="请选择">
              <el-option
                  v-for="item in buildList"
                  :key="item.buildId"
                  :label="item.buildName"
                  :value="item.buildId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="操作时间" prop="date">
            <el-date-picker
                v-model="searchData.date"
                placeholder="选择日期"
                type="date">
            </el-date-picker>
          </el-form-item>

          <!-- <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" :loading="buttonLoading" @click="search">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" :loading="buttonLoading" @click="resetFields">重置</el-button>
          </el-form-item> -->
          <el-form-item style="float:right;">
            <el-button v-hasPermi="['materialManage:detail:query']" :loading="buttonLoading" icon="el-icon-search" size="mini"
                       type="primary" @click="search">查询
            </el-button>
            <el-button v-hasPermi="['materialManage:detail:query']" :loading="buttonLoading" icon="el-icon-refresh"
                       size="mini" @click="resetFields">重置
            </el-button>
            <el-button v-hasPermi="['materialManage:detail:export']" :loading="buttonLoading" icon="el-icon-download"
                       plain size="mini" @click="handleExport">导出
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <div class="page_content" style="width: 100%">
        <div class="page_content_bottom">
          <sysTable
              :columns="setTableColumns"
              :curr-page="searchData.currPage"
              :data="setTableData"
              :page-size="searchData.pageSize"
              :total-page="pageTotal"
              @currentChange="currentChange"
              @sizeChange="sizeChange"
          >
            <template #type="scope">
              <div>{{ jumpState(scope.scope.row.type) }}</div>
            </template>
            <template #brand="scope">
              <div>{{ scope.scope.row.brand }} {{ scope.scope.row.specification }}</div>
            </template>
          </sysTable>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getMaterialManageDetail} from '../api/product/index'
import sysTable from '../components/SysTable'

export default {
  name: 'equipmentEnergy',
  components: {
    sysTable
  },
  data() {
    return {
      searchData: {
        number: '',
        type: '',
        date: '',
        materialNumber: '',
        pageSize: 10,
        currPage: 1
      },
      buildList: [
        {
          buildName: '入库',
          buildId: 1
        },
        {
          buildName: '出库',
          buildId: 2
        },
      ],
      setTableData: [],
      pageTotal: 0,
      setTableColumns: [
        {
          label: '物料编号',
          prop: 'id',
          width: '180',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '物料名称',
          prop: 'materialNumber',
          minWidth: '180',
          align: 'center',
          fixed: 'left',
          showOverflowTooltip: true
        },
        {
          label: '物料分类',
          prop: 'classifyName',
          width: '180',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '(品牌)型号及规格',
          prop: 'brand',
          width: '180',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '操作',
          prop: 'type',
          minWidth: '120',
          // fixed: 'right',
          align: 'center'
        },
        {
          label: '数量',
          prop: 'countQuantity',
          width: '180',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '单位',
          prop: 'unit',
          width: '180',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '关联订单',
          prop: 'orderNumber',
          width: '180',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '操作时间',
          prop: 'operatorDate',
          width: '180',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '备注',
          prop: 'remarks',
          width: '180',
          align: 'center',
          showOverflowTooltip: true
        }
      ],
      buttonLoading: false,
      formData: {},
      addOrEditTitle: '新增',
      addOrEditDialog: false,
      warehousingDialog: false,
      outLibraryDialog: false,
      materialNumber: ''
    }
  },
  mounted() {
    if (this.$route.query.number) {
      this.materialNumber = this.$route.query.number
      this.searchData.materialNumber = this.$route.query.number
      this.getPageList()
    }
    // this.getPageList()
  },
  methods: {
    search() {
      this.searchData.currPage = 1
      this.buttonLoading = true
      this.getPageList()
    },
    resetFields() {
      this.searchData = {
        number: '',
        type: '',
        date: '',
        materialNumber: this.materialNumber,
        pageSize: 10,
        currPage: 1
      }
      this.search()
    },
    sizeChange(val) {
      this.searchData.pageSize = val
      this.getPageList()
    },
    currentChange(val) {
      this.searchData.currPage = val
      this.getPageList()
    },
    getPageList() {
      getMaterialManageDetail(this.searchData).then(res => {
        if (res.code == 200) {
          this.setTableData = res.data.list || []
          this.pageTotal = res.data.total || 0
          this.buttonLoading = false
        } else {
          console.log('111')
          this.setTableData = []
          this.pageTotal = 0
          this.$message.error(res.msg);
        }
        this.buttonLoading = false
      })
    },
    handleExport() {
      this.buttonLoading = true
      var datas = {
        number: this.searchData.number,
        type: this.searchData.type,
        date: this.searchData.date,
        pageSize: '',
        currPage: ''
      }
      const obj = JSON.parse(JSON.stringify(datas))
      this.download('production/materialsRecordsByReport', {
        ...obj
      }, '物料详情记录.xlsx')
      this.buttonLoading = false
      // exportBuild(obj).then(res=> {
      //   const fileName = '设备能源监控记录.xlsx'
      //   saveExcel(res.data, fileName)
      // })
    },
    delOne(val) {

    },
    showwarehousing(val) {
      this.warehousingDialog = true
    },
    showOutLibrary(val) {
      this.outLibraryDialog = true
    },
    submitForm() {
      this.addOrEditDialog = false
    },
    cancel() {
      this.addOrEditDialog = false
    },
    jumpState(val) {
      switch (val) {
        case 1:
          return '入库'
        case 2:
          return '出库'
        default:
          return '-'
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.common_page {
  height: 100%;
  width: 100%;
  background: #f3f4f5;
  overflow: auto;
}

.main_content {
  padding: 16px 20px;
}

::v-deep.el-card {
  border-radius: 8px;
}

.page_content {
  background: #fff;
  padding-bottom: 30px;
  box-sizing: border-box;
  padding: 20px 20px 30px 20px;
  border-radius: 8px;

  .page_content_head {
    display: flex;
  }
}

::v-deep.sys_table {
  .tableHeaderRow {
    cursor: pointer;

    .tableHeaderCell:active {
      opacity: 0.6;
    }

    .tableHeaderCell:last-of-type:active {
      opacity: 1;
    }

    .tableHeaderCell:first-of-type:active {
      opacity: 1;
    }

    .tableHeaderCell:last-of-type {
      cursor: default;
    }

    .tableHeaderCell:first-of-type {
      cursor: default;
    }
  }
}

.ope_btn {
  width: 44px;
  height: 28px;
  line-height: 28px;
  color: #3399FF;
  font-size: 14px;
  background: #FFFFFF;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid rgba(0, 85, 255, 0.5);
  padding: 0px;
}

.del_btn {
  width: 44px;
  height: 28px;
  background: #FFFFFF;
  line-height: 28px;
  color: #FF4C4D;
  font-size: 14px;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  border: 1px solid rgba(255, 76, 77, 0.5);
  padding: 0px;
}

::v-deep.el-form {
  .el-form-item {
    .el-form-item__label {
      text-align: left;
      color: #666;
      font-size: 14px;
      font-weight: 400;
    }
  }
}

.warehousing_dialog {
  ::v-deep.el-form {
    .el-form-item {
      margin-bottom: 10px;
    }

    .el-form-item:last-of-type {
      margin-bottom: 0px;
    }
  }
}

.outLibrary_dialog {
  ::v-deep.el-form {
    .el-form-item {
      margin-bottom: 10px;
    }

    .el-form-item:last-of-type {
      margin-bottom: 0px;
    }
  }
}

.dialog_content {
  background: #F3F4F5;
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;

  .dialog_content_title {
    color: #333;
    font-size: 20px;
    font-weight: bold;
    line-height: 30px;
    margin-bottom: 10px;
  }
}
</style>
